<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中"
      border
      fit
      row-key="id"
      lazy
      highlight-current-row
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="菜单名称">
        <template slot-scope="scope">
          {{ scope.row.label }}
        </template>
      </el-table-column>
      <el-table-column label="排序">
        <template slot-scope="scope">
          {{ scope.row.sort }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ scope.row.delFlg|statusFilter }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作" >
        <template slot-scope="scope">
          <el-row>

            <el-button type="text" @click="editOrAdd(1,scope.row)">编辑</el-button>
            <el-button type="text" @click="updateStatus(scope.row.realId)"  v-if="scope.row.delFlg">启用</el-button>
            <el-button type="text" @click="updateStatus(scope.row.realId)" v-if="!scope.row.delFlg">停用</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="adminData"  label-width="80px" style="margin-left:50px;margin-right: 50px">

        <el-form-item label="菜单名称" prop="realName">
          <el-input v-model="adminData.label"/>
        </el-form-item>

        <el-form-item label="排序" prop="password">
          <el-input v-model="adminData.sort"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click=" cancelEdit()">
          取消
        </el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { addUser, updateStatus } from '@/api/admin'
import {get,post} from '@/utils/request'
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'

export default {
  components: { Pagination },
  directives: { waves },
  filters:{
     statusFilter(status){
       if(!status){
         return "启用"
       }else {
         return  "停用"
       }
     }
  },
  data() {
    return {
      list: [],
      listLoading: true,
      dialogFormVisible: false,
      adminData: {},
      params: {
      },
      rules: {

      },
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    editOrAdd(index,item){
      delete  item.children;
      delete  item.delFlag;
      delete  item.id;
      this.adminData = Object.assign({}, item)
      this.dialogFormVisible=true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    save(){
      let that=this;
      that.$refs['dataForm'].validate((valid) => {
        if (valid) {
          that.dialogFormVisible = false
          post("/sysUser/updateSysResource.json",this.adminData).then(res=>{
            that.$message({
              type: 'success',
              message: '编辑成功!'
            });
            location.reload();
          })
        }
      })
    },
    fetchData() {
      let that=this;
      that.listLoading = true
      get("/sysUser/treeList.json").then(res=>{
        res.forEach((item,index)=>{
        //  item.id=Number(item.id);
          item.forId =index
        })
        // console.log(res)
        that.list = res;
        that.listLoading = false
      })
    },
    cancelEdit(){
      this.dialogFormVisible = false;
      this.fetchData();
    },
    updateStatus(id){
      post("/sysUser/updateResourceStatus.json",{id:id}).then(res=>{
        this.$message({
          type: 'success',
          message: '修改成功!'
        });
        this.fetchData()
      })
    }
  }
}
</script>
